<template>
  <div class="strategy-container">
    <div class="strategy" v-for="s in strategies" :key="s.index">
      <img :src="require(`../assets/survey/strategy${s.index}.png`)">
      <p>{{s.text}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Strategy',
  data(){
    return{
      strategies:[
        {
          index: 1,
          text: '用道路主干道分割地段，形成有限度的开放式街区，再从此基础上生成次级道路，构成树状网络。公建集聚形成显著片群，并靠近南侧与东侧重要城市道路。'
        },
        {
          index: 2,
          text: '行人优先的共享街道设计，为车行道路设限——在保证开放道路的同时控制车速，维持住区内路上行人安全。'
        },
        {
          index: 3,
          text: '板塔结合、南北对称，作为基本形式，以在现代住宅的常用形式上维持院落形态，并允许更多形态变化。'
        }
      ]
    }
  }
}
</script>

<style scoped>
.strategy-container{
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 90%;
  margin: 5%;
}

.strategy-container > .strategy{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 30%;
  height: 60vh;
  margin-bottom: 2rem;
  position: relative;
  background: white;
  border-radius: 2rem;
  box-shadow: 0px 16px 48px rgba(50, 50, 50, 0.2);
  overflow: hidden;
}

.strategy > img{
  transform: translateY(-40%);
  width: 60%;
  margin-bottom: 2rem;
}

.strategy > p{
  height: 45%;
  padding: 5% 10%;
  position: absolute;
  bottom: 0;
  transition: color 0.5s;
  z-index: 1;
}

.strategy > p::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--green);
  transition: width 0.5s;
  z-index: -1;
}

.strategy:hover > p{
  color: white;
  transition: color 0.5s;
}

.strategy:hover > p::after{
  width: 100%;
  transition: width 0.5s;
}

@media screen and (max-width: 1200px) {
  .strategy-container{
    flex-direction: column;
    align-items: center;
  }
  .strategy-container > .strategy{
    width: 90%;
    height: fit-content;
  }
  .strategy > img{
    transform: translateY(0);
    margin: 2rem 0 1rem 0;
  }
  .strategy > p{
    height: fit-content;
    position: relative;
  }
}

</style>